<template>
  <div class="main-body">
    <div class="center-body">
      <div class="head-body"></div>
      <div class="mid-body">
        <div class="left-mid-body">
          <el-image class="left-img" style="width: 100%;" :src="state.logoUrl" fit="fill"/>
        </div>
        <div class="right-mid-body">
          <div class="form-title">
            <span style="font-size: 40px; color: white">Welcome</span>
          </div>
          <div class="form-content">
            <el-form :model="state.loginForm" style="width: 50%">
              <el-form-item>
                <el-input v-model="state.loginForm.username" placeholder="请输入用户名" type="text">
                  <template #prefix>
                    <el-icon>
                      <User/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="state.loginForm.password" placeholder="请输入密码" type="password" show-password>
                  <template #prefix>
                    <el-icon>
                      <Unlock/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="form-button">
            <el-button type="primary" style="width: 50%" @click="loginFn" :loading="state.loginLoading">登录</el-button>
          </div>
          <div class="form-more">
            <span style="color: white" @click="forgetFn">(忘记密码)</span>
            <span style="color: white;" @click="registerFn">(注册)</span>
          </div>
          <div class="form-other-login">
            <div class="login-logo">
              <el-image :src="state.qqUrl" @click="qqLoginFn"></el-image>
            </div>
            <div class="login-logo">
              <el-image :src="state.wechatUrl" @click="wechatLoginFn"></el-image>
            </div>
          </div>
        </div>
      </div>
      <div class="foot-body"></div>
    </div>
  </div>

  <forget-form :show-dialog="state.forgetIsShow"
               :title="state.forgetDialogTitle"
               @cancel="forgetCloseFn"
               @close="forgetCloseFn">
  </forget-form>

  <register-dialog :show-dialog="state.registerIsShow"
               :title="state.registerDialogTitle"
               @cancel="registerCloseFn"
               @close="registerCloseFn">
  </register-dialog>
</template>

<script setup lang="ts">
import {reactive} from "vue";
import logo from "@/assets/img/logo.jpg"
import wechatLogo from "@/assets/img/wechat.svg"
import qqLogo from "@/assets/img/qq.svg"
import {loginReq} from "@/api/login/login.ts";
import {RESPONSE_CODE_SUCCESS} from "@/config/common-config";
import {elMessageTip} from "@/utils/tip-utils.ts";
import {clearAllUserInfo, setAllUserInfo} from "@/utils/user-utils"
import {User, Unlock} from "@element-plus/icons-vue"
import router from "@/route";
import ForgetForm from "@/components/login/ForgetDialog.vue";
import RegisterDialog from "@/components/login/RegisterDialog.vue";
import {getNotReadMessageUtil} from "@/utils/common-request.ts";


interface State {
  isLogin: boolean;
  logoUrl: string;
  wechatUrl: string;
  qqUrl: string;
  forgetIsShow: boolean;
  forgetDialogTitle: string;
  registerIsShow: boolean;
  registerDialogTitle: string;
  loginLoading: boolean;
  loginForm: {
    username: string;
    password: string;
  }
}

const state: State = reactive({
  isLogin: true,
  logoUrl: logo,
  wechatUrl: wechatLogo,
  qqUrl: qqLogo,
  forgetIsShow: false,
  forgetDialogTitle: '忘记密码',
  registerIsShow: false,
  registerDialogTitle: '注册',
  loginLoading: false,
  loginForm: {
    username: "",
    password: ""
  }
})

// 登录
const loginFn = async () => {
  state.loginLoading = true
  clearAllUserInfo()
  const res: any = await loginReq(state.loginForm)
  state.loginLoading = false
  elMessageTip(res.tipType, res.message)
  if (res.code === RESPONSE_CODE_SUCCESS) {
    setAllUserInfo(res.data)
    router.push("/").then();
    getNotReadMessageUtil().then()
  }
}


// 忘记密码
const forgetFn = async () => {
  state.forgetIsShow = true
}

// 忘记密码弹窗关闭
const forgetCloseFn = () => {
  state.forgetIsShow = false
}

// 注册账号
const registerFn = async () => {
  state.registerIsShow = true
}

// 注册账号弹窗关闭
const registerCloseFn = () => {
  state.registerIsShow = false
}

// qq
const qqLoginFn = async () => {

}

// 微信
const wechatLoginFn = () => {

}



</script>

<style scoped>
.main-body {
  width: 100vw;
  height: 100vh;
}

.center-body {
  width: 60vw;
  height: 100vh;
  margin: 0 auto;
}

.head-body {
  width: 100%;
  height: 20vh;
}

.mid-body {
  width: 100%;
  height: 60vh;
  display: flex;
}

.foot-body {
  width: 100%;
  height: 20vh;
}

.left-mid-body {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: #2e2e2b 1px solid;
  border-radius: 20px;
  background-color: black;
}

.right-mid-body {
  width: 60%;
  height: 100%;
  border: #2e2e2b 1px solid;
  border-radius: 20px;
  background-color: black;
}

.form-title {
  width: 100%;
  padding-top: 150px;
  padding-bottom: 50px;
  text-align: center;
}

.form-content {
  width: 100%;
  height: 20%;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
}

.form-button {
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
}

.form-more {
  width: 100%;
  padding-top: 30px;
  text-align: center;
}

.form-other-login {
  width: 100%;
  padding-top: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-logo {
  width: 30px;
  height: 30px;
  margin: 0 10px;
}

</style>